<template>
  <div class="barWrapper">
    <span class="event">{{ event }} </span>
    <!-- 卡槽：可以在父页面显示添加的文字 -->
    <slot />
    <span class="details">{{ details }} </span>
    <span class="iconfont iconjiantou1"></span>
  </div>
</template>

<script>
export default {
  props: ["event", "details"],
};
</script>

<style lang="less" scoped>
.barWrapper {
  display: flex;
  //   justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e4e4e4;
  padding: 10 / 360 * 100vw;
  padding-left: 0;
  margin-left: 20 / 360 * 100vw;

  .event {
    flex-grow: 1;
    font-size: 16 / 360 * 100vw;
    color: #373737;
  }
  .details {
    font-size: 14 / 360 * 100vw;
    color: #a9a9a9;
    padding-right: 8 / 360 * 100vw;
  }
  .iconjiantou1 {
    color: #a9a9a9;
  }
}
</style>